<template>
  <view>
    <hx-navbar ref="hxnb" :config="config">
      <view slot="bottom">
        <template>
          <view class="input-product">
            <clHeadTab :modelData="modelData" @change="tabChange"></clHeadTab>
          </view>
        </template>
      </view>
    </hx-navbar>
    <view class="m-t-160">
      <info :data="listData" v-show="componentsName == 'info'" ref="info"></info>
      <contact :data="listData" v-show="componentsName == 'contact'" ref="contact"></contact>
      <accounts :data="listData" v-show="componentsName == 'accounts'" ref="accounts"></accounts>
      <invoicing :data="listData" v-show="componentsName == 'invoicing'" ref="invoicing"></invoicing>
    </view>
    <view class="fixed-btn" v-if="componentsName != 'info'">
      <u-button text="保存" @click="save()" type="primary" shape="circle"
        color="linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246))"></u-button>
    </view>
    <view class="fixed-btn flex" v-if="componentsName == 'info'">
      <u-button text="名片识别" type="primary" class="card-btn" shape="circle" color="#ddf0ff" border="none"></u-button>
      <u-button text="保存" type="primary" class="save-btn" shape="circle"
        color="linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246))"
        @click="save"></u-button>
    </view>
  </view>
</template>

<script>
import clHeadTab from "@/components/cl-head-tab/cl-head-tab.vue";
import clIcon from "@/components/cl-icon/cl-icon.vue";
import info from './info/info.vue'
import contact from './contact/contact.vue'
import accounts from './accounts/accounts.vue'
import invoicing from './invoicing/invoicing.vue'
import { addData, initAddData,getVoDataById } from "@/apis/bill/information/supplier";
export default {
  components: {
    clIcon,
    clHeadTab,
    info,
    contact,
    accounts,
    invoicing
  },
  data() {
    return {
      componentsName: 'info',
      search: null,
      modelData: [
        { label: "信息", name: "info" },
        { label: "联系", name: "contact" },
        { label: "帐号", name: "accounts" },
        { label: "开票", name: "invoicing" },
      ],
      config: {
        title: "供应商",
        color: "#ffffff",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
      },
      listData: {
        // "code": "", // 编号
        // "name": "",//名称
        // "type": 1,  // 布匹id
        // "typeName": "布匹", // 布匹name
        // "catId": "1597506548639334400", // 分类
        // "catName": null,  // 分类name
        // "shopId": "1597506542394015744",  //门店id
        // "shopName": "总部",// 门店name
        // "settlementTypeId": "1638445103758573568", // 结款方式
        // "settlementTypeName": "234", // 结款id
        // "isEnable": true, // 是否启用
        // "remarks": "", // 备注
        // "originDebt": "10000", // 欠款
        // "labelList": null, //标签
        // "contactInfoList": [],
        // "accountList": [],
      },
      id: null
    };
  },
  computed: {},
  onLoad() {

  },
  mounted() {
    if (this.$Route.query.id) {
      this.getDataItem(this.$Route.query.id)
    } else {
      this.getInitAddData()
    }
  },
  methods: {
    getDataItem(id) {
      getVoDataById(id).then((res) => {
        if (!res.flag) return;
        const data = res.data || {};
        this.listData = data
      });
    },
    getInitAddData() {
      initAddData().then((res) => {
        if (!res.flag) return;
        this.listData = res.data || {};
      });
    },

    tabChange(item) {
      this.componentsName = item.name;
    },
    save() {
      let item = Object.assign(this.listData, this.$refs.info.listData)
      item.contactInfoList = this.$refs.contact.contactInfoList
      item.accountList = this.$refs.accounts.accountList
      addData(item).then((res) => {
        if (!res.flag) return;
        this.$Router.back()
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.input-product {
  width: 95%;
  padding: 0 20upx;
  margin: 30upx auto;
  height: 70upx;
  line-height: 70upx;
  color: #fff;
  display: flex;
}

.fixed-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 30rpx 20rpx;
  background: #fafafa;

  .card-btn {
    color: #409eff !important;
    border-radius: 40rpx 0 0 40rpx;
  }

  .save-btn {
    border-radius: 0 40rpx 40rpx 0;
  }
}</style>
